<template>
  <div class="index">
    <el-container>
      <el-header height="68px">
        <m-header></m-header>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <m-aside></m-aside>
        </el-aside>
        <el-main>
          <div class="wxpay">
            <div class="title">微信支付</div>
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/purchase' }">充值购买</el-breadcrumb-item>
              <el-breadcrumb-item :to="{ path: '/order-from' }">订单详情</el-breadcrumb-item>
              <el-breadcrumb-item>微信充值</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="content">
              <div class="wx-order">
                <div class="wx-order-info">应付金额
                  <br>
                  <span class="price">￥{{total}}</span> 元
                </div>
                #{{orderID}}
                <br>
                {{title}} X {{mount}}
              </div>
              <div class="qrcode">
                <div class="wx-logo">
                  <img src="../assets/wxpay.png" alt="微信支付">
                </div>
                <div class="qrcode-time">
                  {{des1}}
                  <span class="time">{{number}}</span>
                  {{des2}}
                </div>
                <div class="qrcode-area">
                  <div id="qrcode" ref="qrcode"></div>
                </div>
                <div class="qrcode-info">
                  <img src="../assets/qrcode_info.png" alt>
                </div>
              </div>
              <div class="wx-order-sub">
                <span @click="payment">我已完成支付 &gt;&gt;</span>
              </div>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import { getCookie } from "./until/index";
import QRCode from "qrcodejs2";
export default {
  data() {
    return {
      title: "", //商品名称
      mount: "", //商品数量
      total: "", //商品小计
      orderID: "", //商品订单号
      number: 120,
      imgurl: "",
      des1: "距离二维码过期还有",
      des2: "秒，过期后请返回重新购买"
    };
  },
  created() {
    var timer = null;
    clearInterval(timer);
    timer = setInterval(() => {
      this.number--;
      if (this.number <= 0) {
        clearInterval(timer);
        this.number = "";
        this.des1 = "二维码已失效,";
        this.des2 = "请返回到购买页面重新购买";
      }
    }, 1000);

    this.orderID = this.$route.query.orderID;
    this.$ajax
      .get(
        "getSmsProductOrderDetail.ashx?userId=" +
          getCookie("userid") +
          "&token=" +
          getCookie("token") +
          "&orderID=" +
          this.orderID
      )
      .then(res => {
        if (res.data.code == 200) {
          var data = res.data.data.orderList;
          this.title = data[0].productName;

          this.total = data[0].orderAmount;
          this.mount = data[0].productQty;
        } else {
          this.$message.error(res.data.msg);
        }
      })
      .catch(error => {
        console.log(error);
      });
    this.$ajax
      .get(
        "getWXPayInfo.ashx?userId=" +
          getCookie("userid") +
          "&token=" +
          getCookie("token") +
          "&orderID=" +
          this.orderID
      )
      .then(res => {
        if (res.data.code == 200) {
          this.imgurl = res.data.data.payUrl;
          this.qrcodeScan();
        } else {
          this.$message.error(res.data.msg);
        }
      })
      .catch(error => {
        console.log(error);
      });
  },

  methods: {
    payment() {
      this.$router.push({
        path: "/order-list"
      });
    },
    qrcodeScan() {
      let qrcode = new QRCode("qrcode", {
        width: 280, // 二维码宽度
        height: 280, // 二维码高度
        text: this.imgurl
      });
    }
  }
};
</script>
<style scoped>
.index {
  overflow: hidden;
}
.el-header {
  background-color: #3a4759;
  color: #fff;
}
.el-aside {
  background-color: #485668;
  color: #333;
  text-align: center;
  line-height: 200px;
  overflow: hidden;
}
.el-main {
  background-color: #f0eff5;
  color: #333;
  text-align: center;
  height: 100%;
}
.wxpay {
  width: 100%;
  min-height: 100vh;
}
.wxpay .title {
  font-size: 30px;
  font-weight: 500;
  margin-bottom: 20px;
}
.el-breadcrumb {
  padding-bottom: 15px;
}
.content {
  width: 100%;
  background: #fff;
  padding: 20px;
  display: table;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-bottom: 20px;
}
.wx-order {
  border-bottom: 1px solid #d9d9d9;
  padding-bottom: 14px;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
}
.wx-order .wx-order-info {
  float: right;
}
.wx-logo {
  padding-top: 30px;
  padding-bottom: 15px;
  text-align: center;
}
img {
  display: inline-block;
  vertical-align: middle;
}
.qrcode-time {
  padding-bottom: 15px;
  text-align: center;
  font-size: 16px;
}
.qrcode-time .time {
  color: #f00;
  margin-left: 0.41667rem;
  margin-right: 0.41667rem;
}
.qrcode-area {
  text-align: center;
}
#qrcode {
  width: 280px;
  height: 280px;
  margin: 0 auto;
}
.qrcode-info {
  padding-top: 15px;
  padding-bottom: 30px;
  text-align: center;
}
.wx-order-sub {
  padding-top: 30px;
  font-size: 14px;
}
.wx-order-sub span {
  display: inline-block;
  color: #578cff;
  cursor: pointer;
}
</style>
  